<!-- 用户名密码登录 -->
<template>
  <div class="login">
    <div class="header">
      <img src="@/assets/images/tx.jpg" alt />
    </div>
    <div class="form">
      <div class="form-item" style="display:flex">
        <input type="text" placeholder="图片验证码" v-model="captcha" style="width:70%" />
        <img
          src="http://localhost:3000/api/user/captcha"
          @click="getCaptcha"
          style="height:3.6rem"
          ref="imgcode"
          alt
        />
      </div>
      <div class="form-item" style="display:flex">
        <input type="text" placeholder="手机号" style="width:60%" v-model="phone" />
        <button
          style="width:40%;border:2px solid #ccc; background:#ccc"
          v-if="!num"
          @click="getCode"
        >获取验证码</button>
        <button style="width:40%;border:2px solid #ccc; background:#ccc" v-else>重新发送（{{num}}s）</button>
      </div>
      <div class="form-item">
        <input type="text" placeholder="手机验证码" v-model="code" />
      </div>
      <div class="form-item">
        <button @click="phoneRequestAPi">短信登录</button>
      </div>
      <div class="form-check">
        <router-link to="/userlogin">用户登录</router-link>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import Axios from "axios";
// 引入api方法
import { UserLoginApi, getPhoneCodeApi, phoneLoginApi } from "@/api/index";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      num: 0,
      phone: "",
      captcha: "",
      code: "",
      user_name: "",
      user_password: "",
      timer: null,
    };
  },
  computed: {
    //验证手机号
    checkPhone() {
      return /^1[358][0-9]{9}$/.test(this.phone);
    },
  },
  methods: {
    // getUserList() {
    //   Axios.get("http://localhost:3000/api/user/userlist").then((res) => {
    //     console.log(res.data.data);
    //   });
    // },
    loginRequestAPi() {
      UserLoginApi(this.user_name, this.user_password).then((res) => {
        console.log(res);
        if (res.status == 200) {
          //编程式导航
          this.$router.push("/home");
        }
      });
    },
    getCaptcha() {
      //刷新图片验证码
      console.log(this.$refs.imgcode);
      this.$refs.imgcode.src =
        "http://localhost:3000/api/user/captcha?t=" + new Date().getTime();
    },
    async getCode() {
      //获取短信验证码
      if (this.checkPhone) {
        //如果条件成立说明手机号正确
        this.num = 10;
        this.timer = setInterval(() => {
          this.num--;
          if (this.num == 0) {
            clearInterval(this.timer);
          }
        }, 1000);
        //获取验证码
        let result = await getPhoneCodeApi(
          "/user/sendcode",
          {
            phone: this.phone,
          },
          "post"
        );
        console.log(result);
      } else {
        alert("手机格式不正确");
      }
    },
    async phoneRequestAPi() {
      let result = await phoneLoginApi(
        "/user/phonelogin",
        {
          captcha: this.captcha,
          code: this.code,
          phone: this.phone,
        },
        "post"
      );
      console.log(result);
      if (result.status == 200) {
        this.$router.push("/home");
      }
    },
  },
  mounted() {
    // this.getUserList();
  },
};
</script>
<style lang="less">
.login {
  .header {
    display: flex;
    justify-content: center;
    margin-top: 10rem;
    img {
      width: 10rem;
      height: 10rem;
      border-radius: 50%;
      border: 10px solid rgba(0, 0, 0, 0.5);
    }
  }
  .form {
    width: 100%;
    height: 50rem;
    // background: red;
    margin-left: 2rem;
    width: calc(100% - 4rem); //减号两边必须有空格
    .form-item {
      margin: 1rem 0;
      input {
        width: 100%;
        height: 3.6rem;
        border: 1px solid #cccccc;
        text-indent: 1rem;
      }
      button {
        width: 100%;
        height: 3.6rem;
        background: #f55;
        color: #fff;
      }
    }
  }
}
</style>